<template>
	<view>
		<view class="navbar">
			<view class="navbartitle">申请发货</view>
			<image @click="cancela" class="navbarimage" src="../../static/icon/lefticon-icon.png"></image>
		</view>
		<view class="background_bg">
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
		<view class="contentbox">
			<!-- 待发货，已发货，收到货 -->
			<view v-if="addresslist.length==0" class="deliverybox flex ac" @click="addreaa">
				<image class="deliverybox_image" src="../../static/icon/aa/dizhi.png"></image>
				<view class="deliveryview" style="flex: 1;">
					<view style="font-size: 28rpx;color:#5A5A5A;">请填写收货地址</view>
				</view>
				<image style="width: 50rpx;height: 50rpx;" src="../../static/icon/right1.png"></image>
			</view>

			<view v-else class="deliverybox flex ac" @click="addreaa">
				<image class="deliverybox_image" src="../../static/icon/aa/dizhi.png"></image>
				<view class="deliveryview" style="flex: 1;">
					<view style="font-size: 28rpx;color:#5A5A5A;margin-bottom: 20rpx;">{{addresslist.name}}</view>
					<view style="font-size: 28rpx;color:#838383;">
						{{addresslist.province}}{{addresslist.city}}{{addresslist.county}}{{addresslist.addr}}
					</view>
				</view>
				<image style="width: 50rpx;height: 50rpx;" src="../../static/icon/right1.png"></image>
			</view>

			<!-- 商品 -->
			<view class="commoditybox">
				<view v-for="(item,index) in goodsList" :key="index" class="commoditylist flex ac">
					<image class="commoditylist-image" mode="aspectFill" :src="item.main_picture"></image>
					<view class="commoditytext">{{item.name}}</view>
					<view @click="selected(index,item.selected)">
						<image v-if="item.selected==true" class="commoditynum-icon"
							src="../../static/01022120009dzq8tk4239.png"></image>
						<view v-else class="commoditynum"></view>
					</view>
				</view>
			</view>
			<!-- 订单参数 -->
			<view class="orderbox">
				<view class="orderlist flex ac">
					<view class="ordertitle">邮费</view>
					<view style="flex: 1;color: #8a8a8a;">(满2件以上可免费运费哦)</view>
					<view style="color: #ff411f;font-weight: bold;">￥6</view>
				</view>
			</view>

			<!-- 底部 -->
			<view class="buttombox flex ac">
				<view class="xuanze flex ac" @click="allSelect">
					<view v-if="isAllselected==false" class="xuanze-a"></view>
					<image v-else src="../../static/01022120009dzq8tk4239.png" class="xuanze-image"></image>
					<view style="margin-left: 15rpx;font-size: 28rpx;font-weight: bold;">全选</view>
				</view>
				<view style="flex: 1;"></view>
				<view class="flex ac">
					<view style="font-size: 28rpx;font-weight: bold;">合计：</view>
					<view v-if="selectedList.length==0 || selectedList.length==1" 
						style="font-size: 38rpx;font-weight: bold;color: #ff411f;">￥6</view>
					<view v-else style="font-size: 38rpx;font-weight: bold;color: #ff411f;">免运费</view>
				</view>
				<view class="zhifu" @click="opendata">申请发货</view>
			</view>

		</view>
		
		<!-- 弹窗样式 -->
		<u-popup v-model="showdata" mode="bottom" border-radius="20">
			<view class="popup-box">
				<view class="popup-title">充值金额
					<view @click="closedata" class="closebox">
						<u-icon name="close" color="#b1b1b1"></u-icon>
					</view>
				</view>
				<view class="popup-pirce">
					<view style="font-size: 60rpx;font-weight: bold;color:#303030;">￥6</view>
				</view>
				<view style="width: 100%;height: 20rpx;"></view>
				<view class="popup-suanze">
					<view class="popup-list flex ac border-top" @click="selectiondata(1)">
						<view class="popup-image">
							<image src="../../static/icon/aa/payment.png"></image>
						</view>
						<view class="popup-text">支付宝
							<span
								style="padding:2rpx 6rpx;background-color:#FF7028;color: #ffffff;border-radius: 10rpx;margin-left: 10rpx;">推荐</span>
						</view>
						<view class="popup-selection">
							<image v-if="typevalue==1" src="../../static/icon/aa/selection-icon.png"></image>
							<image v-if="typevalue==2" src="../../static/icon/aa/selection.png"></image>
						</view>
					</view>
					<view class="popup-list flex ac border-top border-bottom" @click="selectiondata(2)">
						<view class="popup-image">
							<image src="../../static/icon/aa/wechat.png"></image>
						</view>
						<view class="popup-text">微信支付 </view>
						<view class="popup-selection">
							<image v-if="typevalue==2" src="../../static/icon/aa/selection-icon.png"></image>
							<image v-if="typevalue==1" src="../../static/icon/aa/selection.png"></image>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 79rpx;"></view>
				<view class="buttoxat" @click="recharge">确定支付</view>
				<view style="width: 100%;height: 79rpx;"></view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				value: [],
				id: '',
				indexvalue: '',
				addresslist: [],
				showdata: false,
				isChecked: false,
				goodsList: [],
				selectedList: [],
				isAllselected: false,
				typevalue: 1,
			}
		},

		onLoad(e) {
			this.id = e.id
			this.indexvalue = e.index

			this.defaultaddrdata() //获取默认地址

			// 获取数据
			let data = uni.getStorageSync('key');
			let all = data
			let indexa = this.indexvalue // 假设我们想将3（即索引2的项）移动到第一位
			let item = all.splice(indexa, 1)[0] // 从数组中移除该项并获得它
			all.unshift(item) // 将该项插入到数组的开头

			var arr = []
			for (var i = 0; i < all.length; i++) {
				if (this.id) {
					if (all[0].id == this.id) {
						all[0].selected = true
					}
				}
				all[i].selected = false
				arr.push(all[i])
			}

			this.goodsList = arr
			if (this.id) {
				this.selectedList.push(this.goodsList[0].id)
			}
			// console.log(arr,">>>>>>>>>>>")

		},

		onShow(e) {
			var that = this
			if (uni.getStorageSync("update_data")) {
				this.addresslist = getApp().globalData.address
				// console.log(this.addresslist,"选择地址保存的值")
				uni.removeStorageSync('update_data')
			}
		},

		methods: {
			//打开弹窗
			opendata(e) {
				if(this.selectedList.length==0 || this.selectedList.length==1){
					this.showdata = true
				}else{
					
				}
			},
			
			//选择支付方式
			selectiondata(e) {
				this.typevalue = e
			},
			
			//关闭弹窗
			closedata(e) {
				this.showdata = false
			},
			
			// 选中商品
			selected(index) {
				this.goodsList[index].selected = this.goodsList[index].selected ? false : true;
				let i = this.selectedList.indexOf(this.goodsList[index].id);
				i > -1 ? this.selectedList.splice(i, 1) : this.selectedList.push(this.goodsList[index].id);
				this.isAllselected = this.selectedList.length == this.goodsList.length;
			},

			//全选
			allSelect() {
				let len = this.goodsList.length;
				let arr = [];
				for (let i = 0; i < len; i++) {
					this.goodsList[i].selected = this.isAllselected ? false : true;
					arr.push(this.goodsList[i].id);
				}
				this.selectedList = this.isAllselected ? [] : arr;
				this.isAllselected = this.isAllselected || this.goodsList.length == 0 ? false : true;
			},

			//选择地址
			addreaa(e) {
				uni.navigateTo({
					url: '/pages/addresslist/addresslist'
				})
			},

			//返回
			cancela(e) {
				uni.navigateBack({
					dalta: 1,
				})
			},

			//获取默认地址
			async defaultaddrdata(e) {
				let apply = await request(`${getApp().globalData.http}user/default_addr`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
				})
				this.addresslist = apply.data.data
			},


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.background_bg {
		width: 100%;
		height: 230rpx;
		background-image: url(https://duimianimg.loovee.com/style/img/h5/ukaka/ukaka_h51705493057877/img/ukaka_dd_bg.b33b7f9.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.navbar {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		position: fixed;
		top: 0;
		left: 0;
	}

	.navbartitle {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 700;
	}

	.navbarimage {
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		top: 30rpx;
		left: 20rpx;
	}

	.contentbox {
		margin-top: -90rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	// 待发货，已发货，收到货
	.deliverybox {
		background-color: #ffffff;
		height: 150rpx;
		padding: 0 30rpx;
		border-radius: 15rpx;
		box-shadow: 0 0.10667rem 0.53333rem 0 rgba(0, 0, 0, .06);
	}

	.deliverybox .deliverybox_image {
		width: 50rpx;
		height: 50rpx;
	}

	.deliveryview {
		margin-left: 20rpx;
	}

	// 商品
	.commoditybox {
		background-color: #ffffff;
		padding: 30rpx 30rpx;
		border-radius: 15rpx;
		margin-top: 30rpx;
		box-shadow: 0 0.10667rem 0.53333rem 0 rgba(0, 0, 0, .06);
	}

	.commoditylist-image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 15rpx;
		margin: 20rpx 0;
	}

	.commoditytext {
		margin-left: 20rpx;
		font-size: 30rpx;
		flex: 1;
	}

	.commoditynum {
		width: 36rpx;
		height: 36rpx;
		background: #E9EEF3;
		border-radius: 50%;
	}

	.commoditynum-icon {
		width: 36rpx;
		height: 36rpx;
	}

	//订单参数
	.orderbox {
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 15rpx;
		margin-top: 30rpx;
		font-size: 28rpx;
		box-shadow: 0 0.10667rem 0.53333rem 0 rgba(0, 0, 0, .06);
	}

	.orderlist {
		padding: 15rpx 0;
	}

	.ordertitle {
		width: 70rpx;
	}

	.buttombox {
		width: 100%;
		height: 120rpx;
		background-color: #ffffff;
		box-shadow: 0 -0.02667rem 0.10667rem 0 rgba(0, 0, 0, 0.05);
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 30rpx;
	}

	.xuanze-a {
		width: 36rpx;
		height: 36rpx;
		background: #E9EEF3;
		border-radius: 50%;
	}

	.xuanze-image {
		width: 36rpx;
		height: 36rpx;
	}

	.zhifu {
		width: 198rpx;
		height: 75rpx;
		background-color: #30344c;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #ffffff;
		border-radius: 50rpx;
		margin-left: 38rpx;
	}
	
	// 弹窗样式
	.popup-box {
		width: 100%;
	}
	
	.popup-title {
		text-align: center;
		padding: 30rpx 0;
		font-size: 32rpx;
		font-weight: 800;
		position: relative;
	}
	
	.closebox {
		position: absolute;
		right: 25rpx;
		top: 25rpx;
	}
	
	.choice {
		width: 100%;
		height: 110rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}
	
	.choice image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.popup-pirce {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}
	
	.popup-suanze {}
	
	.popup-list {
		padding: 30rpx 30rpx;
	}
	
	.border-top {
		border-top: 1px solid #eaeaea;
	}
	
	.border-bottom {
		border-bottom: 1px solid #eaeaea;
	}
	
	.popup-image {
		width: 62rpx;
		height: 62rpx;
		margin-right: 30rpx;
	}
	
	.popup-image image {
		width: 100%;
		height: 100%;
	}
	
	.popup-text {
		font-size: 30rpx;
		flex: 1;
	}
	
	.popup-selection {
		width: 42rpx;
		height: 42rpx;
	}
	
	.popup-selection image {
		width: 100%;
		height: 100%;
	}
	
	.buttoxat {
		width: 500rpx;
		height: 90rpx;
		background-image: linear-gradient(270deg, #ff6144 15%, #ff99c9);
		color: #ffffff;
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		margin: 0 auto;
	}
</style>